<script setup>
import Avatar from "@/components/Avatar.vue"
import {useRouter, useRoute} from "vue-router";
import {computed, ref, watch} from "vue";
import {userAPI} from "@/apis/index.js";
import {useUserStore} from "@/stores/index.js";

const router = useRouter()
const route = useRoute()

const userStore = useUserStore()

const unreadCount = computed(() => userStore.unreadCount)

const loading = ref(false)


const messageCountInfo = ref({
  reply: 1,
  likePost: 10,
  likeComment: 100,
  system: 0
});

const userInfo = computed(() => userStore.userInfo || {})

const userId = userInfo.value.userId

const activeTabName = computed(() => route.params.type || "reply");
const code = ref(1)

// 切换回复类型
const tabChange = (type) => {
  router.push(`/user/message/${type}`)
};

// 前往用户中心
const goToUcenter = () => {
  router.push(`/user/${userId}`)
}

// 消息列表
const messageListInfo = ref([])

// 获取消息列表
const fetchMessageList = async () => {
  loading.value = true
  const data = {
    code: code.value
  }
  try {
    const response = await userAPI.getMessageList(data)
    if (response.status === 'success') {
      messageListInfo.value = response.data.list
    }
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

// 监听路由变化，更新 code 值
watch(() => route.params.type, (newType) => {
  const type = newType || 'reply';
  switch (type) {
    case 'reply':
      code.value = 1; // 回复消息
      break;
    case 'like':
      code.value = 2; // 点赞消息
      break;
    case 'system':
      code.value = 0; // 系统消息
      break;
    default:
      code.value = 1;
  }
  fetchMessageList();
}, { immediate: true });

</script>

<template>
  <div class="container-body message-center">
    <div class="user-banner">
      <router-link to="/" class="a-link">Home Page</router-link>
      <el-icon>
        <ArrowRight/>
      </el-icon>
      <span>Message</span>
    </div>
    <div class="message-container">
      <div class="tabs-panel">
        <el-tabs type="border-card" :model-value="activeTabName" @tab-change="tabChange">
          <!--          回复-->
          <el-tab-pane name="reply">
            <template #label>
              <div class="tab-item">
                <span class="label">Reply Me</span>
                <span class="count-tag" v-if="unreadCount.replyUnread > 0">
                  {{ messageCountInfo.reply > 99 ? "99+" : unreadCount.replyUnread }}
                </span>
              </div>
            </template>

            <!--            内容-->
            <div class="skeleton" v-if="loading">
              <el-skeleton :row="5" animated />
            </div>
            <template v-else>
              <div class="message-item" v-if="messageListInfo.length > 0" v-for="item in messageListInfo">
                <Avatar :src="item.sendUserAvatar" :width="50"></Avatar>
                <div class="message-content" v-if="item.messageType == 1">
                  <div>
                    <div class="reply-content">
                      <span v-if="item.readStatus == 0" class="tag">New</span>
                      <router-link class="a-link" :to="`/user/${item.sendUserId}`">
                        {{ item.sendNickName }}:
                      </router-link>
                      <span>{{ item.content }}</span>
                    </div>
                    <div class="reply-info">
                      <span>Reply my post: </span>
                      <router-link
                          class="a-link"
                          :to="`/post/${item.articleId}`"
                      >
                        "{{ item.articleTitle }}"
                      </router-link>
                      <span class="create-time">{{ item.time }}</span>
                    </div>
                  </div>
                </div>

                <div class="message-content" v-if="item.messageType == 2">
                  <div>
                    <div class="reply-content">
                      <span v-if="item.readStatus == 0" class="tag">New</span>
                      <router-link class="a-link" :to="`/user/${item.sendUserId}`">
                        {{ item.sendNickName }}:
                      </router-link>
                      <span>{{ item.content }}</span>
                    </div>
                    <div class="reply-info">
                      <span>Reply my comment: "{{item.message}}"> </span>
                      <router-link
                          class="a-link"
                          :to="`/post/${item.articleId}`"
                      >
                        "{{ item.articleTitle }}"
                      </router-link>
                      <span class="create-time">{{ item.time }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                <el-empty description="You haven't received any message yet" />
              </div>
            </template>

          </el-tab-pane>
          <!--          点赞-->
          <el-tab-pane name="like">
            <template #label>
              <div class="tab-item">
                <span>Like Post</span>
                <span class="count-tag" v-if="unreadCount.likeUnread > 0">
                  {{ messageCountInfo.likePost > 99 ? "99+" : unreadCount.likeUnread }}
                </span>
              </div>
            </template>

            <!--              内容-->
            <div class="skeleton" v-if="loading">
              <el-skeleton :row="5" animated />
            </div>
            <template v-else>
              <div class="message-item" v-if="messageListInfo.length > 0" v-for="item in messageListInfo">
                <Avatar :src="item.sendUserAvatar" :width="50"></Avatar>
                <!--              赞了帖子-->
                <div class="message-content" v-if="item.messageType == 3">
                  <div>
                    <div class="reply-content">
                      <span v-if="item.readStatus == 0" class="tag">New</span>
                      <router-link class="a-link" :to="`/user/${item.sendUserId}`">
                        {{ item.sendNickName }}
                      </router-link>
                      <span>: Like my post</span>
                    </div>
                    <div class="reply-info">
                      <span>Post: </span>
                      <router-link
                          class="a-link"
                          :to="`/post/${item.articleId}`"
                      >
                        "{{ item.articleTitle }}"
                      </router-link>
                      <span class="create-time">{{ item.time }}</span>
                    </div>
                  </div>
                </div>
                <!--              赞了回复-->
                <div class="message-content" v-if="item.messageType == 4">
                  <div>
                    <div class="reply-content">
                      <span v-if="item.readStatus == 0" class="tag">New</span>
                      <router-link class="a-link" :to="`/user/${item.sendUserId}`">
                        {{ item.sendNickName }}
                      </router-link>
                      <span>: Like my reply </span>
                      <span>"{{item.content}}"</span>
                    </div>
                    <div class="reply-info">
                      <span>Post: </span>
                      <router-link
                          class="a-link"
                          :to="`/post/${item.articleId}`"
                      >
                        "{{ item.articleTitle }}"
                      </router-link>
                      <span class="create-time">{{ item.time }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                <el-empty description="You haven't received any message yet" />
              </div>
            </template>
          </el-tab-pane>
          <!--          系统信息-->
          <el-tab-pane name="system">
            <template #label>
              <div class="tab-item">
                <span>System Info</span>
              </div>
            </template>
            <div class="skeleton" v-if="loading">
              <el-skeleton :row="5" animated />
            </div>
            <div class="message-item" v-else v-for="item in messageListInfo">
              <div class="message-content" v-if="item.messageType == 0">
                <span>System Info: {{ item.content }}</span>
                <span class="create-time">{{ item.time }}</span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <el-button type="primary" @click="goToUcenter" class="a-link go-ucenter">
          User Center
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.message-center {
  width: 1300px;

  .user-banner {
    color: #9ba7b9;
    line-height: 35px;

    .icon-right {
      padding: 0px 5px;
    }
  }

  .message-container {
    background: #fff;

    .tabs-panel {
      position: relative;


      .tab-item {
        position: relative;
        padding: 0px 10px;
        width: 90px;

        .count-tag {
          position: absolute;
          right: -15px;
          height: 20px;
          line-height: 20px;
          width: 30px;
          display: inline-block;
          background: #f56c6c;
          border-radius: 5px;
          font-size: 13px;
          text-align: center;
          color: #fff;
        }
      }

      .message-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #ddd;
        padding: 10px;

        .message-content {
          margin-left: 5px;

          .reply-content {
            font-size: 16px;
            padding-left: 5px;
            margin-top: 5px;
            .tag {
              background-color: #F56C6C;
              color: #fff;
              font-size: 14px;
              border-radius: 3px;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              margin-right: 3px;
            }
          }

          .reply-info {
            margin-top: 10px;
            font-size: 13px;
          }

          .create-time {
            color: #9ba7b9;
            margin-left: 10px;
          }
        }
      }

      .go-ucenter {
        position: absolute;
        top: 5px;
        right: 10px;
        font-size: 16px;
      }
    }

  }
}
</style>